<template>
	<div class="lease">
	<div class="body">
		<div class="favourable" v-show="isActive" @click="active">
			<p>点击参与优惠活动</p>
			<i class="el-icon-erp-gengduo"></i>
		</div>
		<form>
			<div class="info">
				<input type="text" v-model="username" placeholder="使用者姓名" class="top"/>
				<input type="tel" v-model="phone" placeholder="使用者手机号码"/>
				<input type="text" v-model="doctorname" placeholder="指导医生/药师单位、姓名"/>
				<div class="pickgoods">
					<div class="addressinformation" @click="pickGoods">
						 {{allname}}
					     <p class="allname">{{shopname}}</p>
					     <p class="address">{{address}}</p>
					</div>
				    <i class="el-icon-erp-dongzuo-daozhequ go" @click="Navigation" v-show="isGo"></i>
				</div>
				<div class="payWay">
				<label class="demo--label"> 
                 <input class="demo--radio" type="radio" value="1" v-model="pay">
                 <span class="demo--radioInput"></span>微信支付
              </label>
				<label class="demo--label">
                <input class="demo--radio" type="radio" value="2" v-model="pay">
                <span class="demo--radioInput"></span>账户余额
                   </label>
				</div>
			</div>
		</form>	 
		
	</div>
	<div class="footer" v-if="!!myVal">
		<div class="box">
		  <div class="deposits">
			<p><span>押金：</span><span class="prices">￥{{cash}}</span></p>	
		   </div>
			<button type="button" class="closeButton" @click="back">取消</button>
		    <button type="button" class="submitButton" @click="submit">确认</button>
		</div>
		 <p class="favourableAmount"><span>预付租金：</span><span class="prices">￥{{price.favourableAmount}}</span></p>	
		 <p class="totalPay"><span>合计：</span><span class="prices">￥{{price.totalPay}}</span></p>
	</div>
	<div class="footers" v-else>
		<div class="deposit">
			<p><span>押金：</span><span class="prices">￥{{cash}}</span></p>
		</div>
		<button type="button" class="closeButton" @click="back">取消</button>
		<button type="button" class="submitButton" @click="submit">确认</button>
	</div>
	<shop v-show="isShopShow" @chooseShop="chooseShop" @close="close"></shop>
	<active v-show="isShow"  @closeModal="closeModal" @params="params"></active>
	<baidu :address="address"></baidu>
</div>
</template>

<script>
import baidu from '@/components/m-baidu/baidu'
import shop from '@/components/m-address/shop'
import active from '@/components/m-active/active'
import { jsSDK } from '@/common/js/pay'

export default {
	name: 'lease',
	components: {
		baidu,
		shop,
		active
	},
	props: {},
	data() {
		return {
			doctorname: '',
			username:'',
			phone:'',
			isShopShow: false,
			isShow:false,
			shopname: '',
			shopid: '',
			address: '',
			allname: '选择取货地址',
			cash: 0,
			pay: '1',
			productId: '',
			list: '',
			payWay: '租赁',
			isGo:false,
			myVal:'',
			price:'',
			isActive:false
		}
	},
	mounted() {
		if(this.$store.state.active_data.length == 0) {
			this.isActive = false
		}else{
			this.isActive = true
		}
		this.getParams()
	},
	methods: {
		//提交
		submit() {
			if(this.doctorname == '' || this.doctorname == null) {
				this.$messagebox.alert("医生姓名不能为空！")
				return false;
			}
			if(this.shopid == '' || this.shopid == null) {
				this.$messagebox.alert("请选择取货门店！")
				return false;
			}
			if(this.pay == "" || this.pay == null) {
				this.$messagebox.alert("请选择支付方式！")
				return false;
			}
			if(this.username == "" || this.username == null) {
				this.$messagebox.alert("姓名不能为空！")
				return false;
			}
			if(this.phone == null || this.phone == ""){
				this.$messagebox.alert("手机号码不能为空！")
				return false;
			}else{
				var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if(!myreg.test(this.phone.replace(/\s+/g,""))) {
					this.$messagebox.alert("请输入正确的手机号码！")
				return false;
				}
			}
			this.$http.post(this.$store.state.reqUrl + '/customer/orders/placeOrder', {
				doctorName: this.doctorname,
				userName:this.username,
				phoneNo:this.phone,
				payWay: this.pay,
				productFavourableId:this.myVal,
				productId: this.productId,
				shopId: this.shopid,
			}).then(res => {
				/*if(res.data.payResultCode == 10000) {
					this.$toast("请先完善个人资料！")
					this.$router.push('/fillmyselfinformation')
				}else{*/
				if(res.data.payWay == 1) {	
					jsSDK(res.data, this.payWay)
				} else {
					//this.$toast(res.data.msg)
						this.$router.push({
							path: "/waitpickgood",
							query: {
								interface_url: '/customer/orders',
								statu:1,
								style_name: '取货码',
								order_title: '待取货',
								style_title:'实付款'
							}
						});
					/*if(res.data.msg == "账户余额不足") {
						this.$router.push({
							path: "/waitpayments",
							query: {
								interface_url: '/customer/orders',
								statu:0,
								style_name: '付款',
								order_title: '待付款',
								style_title:'需付款'
							}
						});
						this.$toast("账户余额不足，请使用微信支付！")
					} else {
						this.$toast(res.data.msg)
						this.$router.push({
							path: "/waitpickgood",
							query: {
								interface_url: '/customer/orders',
								statu:1,
								style_name: '取货码',
								order_title: '待取货',
								style_title:'实付款'
							}
						});
					}				*/	
				  }
				/*}*/
				}).catch(res => {
					this.$toast(res.response.data)
//					this.$router.push({
//						path: "/waitpayments",
//						query: {
//							interface_url: '/customer/orders',
//							statu:0,
//							style_name: '付款',
//							order_title: '待付款',
//							style_title:'需付款'
//						}
//					})
			  })
		},
		//接受子组建参数
		chooseShop(item) {
			this.shopname = item.shopName;
			this.shopid = item.id;
			this.address = item.address;
			this.allname = "";
			if(!!this.address){
				this.isGo = true;
			}
		},
		//显示店铺
		pickGoods() {
			this.isShopShow = true;
		},
		//关闭店铺
		close(parame) {
			this.isShopShow = parame;
		},
		//取消
		back() {
			this.$router.go(-1);
		},
		getParams() {
			// 取到路由带过来的参数 
			this.cash = this.$route.query.cash;
			this.productId = this.$route.query.productid;
		},
		//活动
        active() {
        	this.isShow = true
        },
        closeModal (param) {
        	this.isShow = param
        },
        params (myVal) {
        	this.myVal = myVal
        },
        //获取价格
        getPrice () {
        	this.$http.get(this.$store.state.reqUrl + '/products/amount/'+this.productId , {
					params:{
					   	productFavourableId:this.myVal
					}
				}).then(res => {
			      this.price = res.data
		       })		
             },
		//导航
		Navigation() {
			var address = this.address;
			/*var map = new BMap.Map("allmap");
			var point = new BMap.Point(116.709684, 39.89778);
			map.centerAndZoom(point, 16);
			map.enableScrollWheelZoom();*/
           
		   //在地图中标记当前所在位置
	      /* var geolocation = new BMap.Geolocation();
	       geolocation.getCurrentPosition(function(r){
	    	//console.log(r.point)
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);*/
           // map.addOverlay(mk);//标出所在地
          //  map.panTo(r.point);//地图中心移动
            //alert('您的位置：'+r.point.lng+','+r.point.lat);
//          var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
//          alert(JSON.stringify(point))
//          var gc = new BMap.Geocoder();
           // gc.getLocation(point, function(rs){
             //  var addComp = rs.addressComponents; console.log(rs.address);//地址信息
               //alert(rs.address);//弹出所在地址
          // });
              location.href = "http://api.map.baidu.com/geocoder?address="+address+"&output=html&src=webapp.baidu.openAPIdemo"
          /* }else {
               alert('failed'+this.getStatus());
            }        
          },{enableHighAccuracy: true})
*/
		    },
		  },
		 watch:{
		   myVal (myVal) {
		   	  if(!!myVal) {
		   	  	 this.getPrice()
		   	  }
		     }
           }
		}
</script>

<style scoped>  
	.lease{
	 font-size: 28px;	
	 background: #FFFFFF;
	} 
	.footers{
		position: fixed;
		z-index: 88;
		bottom: 0;
		left: 0;
		width:100%;
		height: 100px;
		background: #FFFFFF;
		border-top: 1px solid gainsboro;
		display: flex;
	}
	.favourable{
		display: flex;
		height: 100px;
		border-bottom: 1px solid gainsboro;
	}
	.favourable p{
		flex: 1;
		font-size: 34px;
		padding-left: 20px;
		line-height: 100px;
		color: #FF0000;
	}
	.favourable i{
		width:120px;
		line-height: 100px;
		text-align: center;
		font-size: 34px;
		color:gray;
	}
	.payWay{
		padding:0 20px;
		height: 80px;
		line-height: 80px;
	}
	.demo--label {
		margin: 20px 20px 0 0;
		display: inline-block
	}
	.demo--radio {
		display: none
	}
	.demo--radioInput {
		background-color: #fff;
		border: 2px solid rgba(0, 0, 0, 0.15);
		border-radius: 100%;
		display: inline-block;
		height: 36px;
		margin-right: 10px;
		margin-top: -1px;
		vertical-align: middle;
		width: 36px;
		line-height: 1
	}
	.demo--radio:checked+.demo--radioInput:after {
		background-color: #00A1E9;
		border-radius: 100%;
		content: "";
		display: inline-block;
		height: 26px;
		margin-left: 5px;
		margin-top: 5px;
		width: 26px
	}
	.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{
		border-radius:0;
		}
    .deposit{
    	flex: 1;
    	display: flex;
    	color: grey;
    	padding-left:20px;
    	line-height: 80px;
    }
    .deposit p{
    	flex: 1;
    }
    .prices{
    	color: #FF0000;
    	font-size: 32px;
    }
    .closeButton{
    	width:150px;
    	height: 100%;
    	background: grey;
    	font-size: 28px;
    	color: #FFFFFF;
    	border: 0;
    	font-size: 30px;
    }
    .submitButton{
    	width:150px;
    	height: 100%;
    	font-size: 30px;
    	color: #FFFFFF;
    	background: #FF0000;
    	border: 0;
    }
    .info{
    	overflow-x: hidden;
      }
    input{
    	width:100%;
    	height: 105px;
    	outline: none;
    	border-bottom: 1px solid gainsboro;
    	font-size: 30px;
    	padding:0 20px;
    }
    /*.top{
    	border-top: 1px solid gainsboro;
    }*/
    input:focus{
    	outline: none;
    }
    .pickgoods{
    	display: flex;
    	width:100%;
    	border-bottom: 1px solid gainsboro;
    	font-size: 30px;
    	color:#999;
    	padding:30px 20px;
    	font-size: 30px;
    }
    .pickgoods p{
    	font-size: 26px;
    	color: #000000;
    }
    .address{
        line-height: 35px;
    }
    .addressinformation{
    	flex: 1;
    }
    .go{
    	width:100px;
    	font-size: 50px;
    	color: #1296db;
    }
    ::-webkit-input-placeholder {
    color:#999;
    font-size: 28px;
  }
   :-moz-placeholder {
    color:#999;
    font-size: 28px;
  }
   ::-moz-placeholder {
    color:#999;
    font-size: 28px;
  }
   :-ms-input-placeholder {
    color:#999;
    font-size: 28px;
  }
  .chooseName{
  	    width:100%;
    	height: 80px;
    	border-bottom: 1px solid gainsboro; 
    	line-height: 80px;	
    	color:#999;
  }
  .money{
  	margin-left:10px;
  }
  .footer{
  	 position: fixed;
  	 z-index: 88;
	 bottom: 0;
	 left: 0;
	 width:100%;
	 height: 120px;
	 background: #FFFFFF;
	 border-top: 1px solid gainsboro;
  }
  .footer .favourableAmount{
  	position: absolute;
  	top: 35px;
  	left: 20px;
  	font-size: 24px;
  }
   .footer .favourableAmount span{
  	font-size: 24px;
  }
  .footer .totalPay{
  	position: absolute;
  	top:70px;
  	left: 20px;
  	font-size: 32px;
  }
   .footer .totalPay span{
  	font-size: 32px;
  }
  .footer .box{
  	display: flex;
  	justify-content: center;
  }
  .footer .box .deposits{
  	 flex: 1;
  	 font-size: 24px;
  }
  .footer .box .deposits p{
  	margin-left: 20px;
  	font-size: 24px;
  }
  .footer .box .deposits p span{
  	font-size: 24px;
  }
 .footer .closeButton{
    	width:150px;
    	height: 120px;
    	background: grey;
    	font-size: 28px;
    	color: #FFFFFF;
    	border: 0;
    	font-size: 30px;
    }
   .footer .submitButton{
    	width:150px;
    	height: 120px;
    	font-size: 30px;
    	color: #FFFFFF;
    	background: #FF0000;
    	border: 0;
    }
</style>